<template>
    <el-row :gutter="20">
        <el-col :span="3" class="col" v-for="item, index in iconNavs">
            <el-card class="box-card" @click="router.push(item.path)">
                <p class="icon">
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                </p>
                <p class="title">{{ item.title }}</p>
            </el-card>

        </el-col>
    </el-row>
</template>
<script setup lang='ts'>
import { useRouter } from 'vue-router'
const router = useRouter()

const iconNavs = [
    {
        icon: "user",
        color: "text-light-blue-500",
        title: "用户",
        path: "/user/list"
    },
    {
        icon: "shopping-cart",
        color: "text-violet-500",
        title: "商品",
        path: "/goods/list"
    },
    {
        icon: "tickets",
        color: "text-fuchsia-500",
        title: "订单",
        path: "/order/list"
    },
    {
        icon: "chat-dot-square",
        color: "text-teal-500",
        title: "评价",
        path: "/comment/list"
    },
    {
        icon: "picture",
        color: "text-rose-500",
        title: "图库",
        path: "/image/list"
    },
    {
        icon: "bell",
        color: "text-green-500",
        title: "公告",
        path: "/notice/list"
    },
    {
        icon: "set-up",
        color: "text-grey-500",
        title: "配置",
        path: "/setting/base"
    },
    {
        icon: "files",
        color: "text-yellow-500",
        title: "优惠券",
        path: "/coupon/list"
    }
]

</script>
<style lang='scss' scoped>
.el-row {
    margin-bottom: 20px;
    margin-top: 5px;
}

.el-row:last-child {
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.el-col {
    border-radius: 4px;
    min-width: 110px;
    cursor: pointer;
}


.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.icon,.title{
    text-align: center;
}

</style>